<template>
    <ui-main title="下拉选择">
        <div class="item one">
            <p>model-id: {{modelId}}</p>
            <p>model-label: {{modelLabel}}</p>
            <div class="ui divider"></div>
            <ui-select :option="option" :model-id.sync="modelId" :model-label.sync="modelLabel" @change="change" allow-create
                default-first-option  @removeTag="removeTag"></ui-select>
        </div>
        <div class="item two">
            <ui-load-md file="ui-select.md"></ui-load-md>
        </div>
    </ui-main>
</template>
<script>
    export default {
        data() {
            return {
                option: [],
                modelId: '',
                modelLabel: ''
            }
        },
        methods: {
            change(v) {
                console.log('选中项:', v)
            },
            removeTag(v) {
                console.log(v)
            }
        },
        mounted() {
            // 模拟后端数据懒加载
            setTimeout(() => {
                this.option = [
                    { id: '01', label: '萝莉', pinyin_code: 'LL' },
                    { id: '02', label: '御姐', pinyin_code: 'yj' },
                    { id: '03', label: '人妖', pinyin_code: 'ry' }
                ]
            }, 1000)
        }
    }
</script>
